import React,{useCallback,useState} from 'react';
import { useNavigate } from 'react-router';
import { Route, Routes,Navigate, Link, } from 'react-router-dom'
import {Menu} from 'antd';
import {HomeOutlined } from '@ant-design/icons';

import PlayMovie from './movies/Play_movie';
import WillMovie from './movies/Will_movie';


function Movie() {
    const baseUrl = '/movie'
    const navigate = useNavigate()
    const goInto = useCallback((path)=>{
        navigate(baseUrl+path)
    },[])
    const goHome = useCallback((path)=>{
        navigate('/index'+path)
    },[])
    return (
        <>           
            <Menu mode="horizontal" defaultSelectedKeys={['/play']} style={{ width: '100%'}}>
                <Menu.Item key='/play' style={{ left:'25%',height:50 }} type='link' onClick={goInto.bind(null,'/play')}>
                    正在热映
                </Menu.Item>
                <Menu.Item key='/will' style={{ left:'50%',height:50 }} type='link' onClick={goInto.bind(null,'/will')} >
                   即将上映
                </Menu.Item>
                <Menu.Item key='/home' icon={<HomeOutlined style={{fontSize:25}}/>} style={{left:'78%',height:50}}
                onClick={goHome.bind(null,'/home')} ></Menu.Item>
            </Menu>
            <Routes>
                 <Route index element={<Navigate to='play' />} />
                <Route path='/play' element={<PlayMovie/>} />
                <Route path='/will' element={<WillMovie/>} />
            </Routes>
        </>
    )
}

export default Movie;